import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'
export default class List extends Component {
  state = {
    userList: [],
    isFirst: true,
    isLoading: false,
    errMsg: ''
  }
  componentDidMount() {
    PubSub.subscribe('getSearchList', (_, obj) => {
      this.setState(obj)
    })
  }
  componentWillUnmount() {
    PubSub.unsubscribe('getSearchList')
  }

  render() {
    const { userList, isFirst, isLoading, errMsg } = this.state
    return (
      <div className="row">
        {isFirst ? (
          <h1>欢迎使用，输入关键字，随后点击搜索</h1>
        ) : isLoading ? (
          <h2>加载中....</h2>
        ) : errMsg ? (
          <h2>{errMsg}</h2>
        ) : (
          userList.map((item) => {
            return (
              <div className="card" key={item.id}>
                <a href={item.html_url} target="_blank" rel="noreferrer">
                  <img
                    src={item.avatar_url}
                    style={{ width: '100px' }}
                    alt="avatar"
                  />
                </a>
                <p className="card-text">{item.login}</p>
              </div>
            )
          })
        )}
      </div>
    )
  }
}
